<script lang="ts">
	const data = fetch(`https://api.github.com/repos/barvian/fluid-tailwind`).then((r) => r.json())
</script>

{#await data}
	<div role="status">
		<svg
			class="size-4 animate-spin"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 24 24"
		>
			<path
				class="opacity-75"
				fill="currentColor"
				d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
			></path>
		</svg>
		<span class="sr-only">Loading...</span>
	</div>
{:then repo}
	<div class="flex items-center gap-1">
		<svg aria-label="stars" role="img" class="h-4" viewBox="0 0 16 16" fill="currentColor">
			<path
				d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"
			></path>
		</svg>
		<span class="text-sm font-semibold lowercase"
			>{repo.stargazers_count.toLocaleString('en-US', {
				notation: 'compact',
				compactDisplay: 'short'
				// GitHub rounds these (Twitter truncates)
				// roundingMode: 'trunc'
			})}</span
		>
	</div>
{/await}
